<template>
	<view class="a-tabs" :class="border">
		<view class="item-box" :style="{width:_row+'%',lineHeight:height+'px'}"
		 v-for="(x,key) in value" :key="key" @click="go(x,key)">
			<view class="item" :style="{backgroundColor:(type==='circle' && _index == key)?color:'transparent',color:_index == key?color:'#000'}" :class="_index == key && type">
				<slot :name="x.slot" :row="x" :index="key">
					{{x.name}}
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [Array, Object],
				default () {
					return [];
				}
			},
			row: {
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: 'red'
			},
			index: {
				type: Number,
				default: 0
			},
			border: {
				type: Boolean,
				default: true
			},
			type:{
				type:String,
				default:'circle'
			},
			height:{
				type:Number,
				default:40
			}
		},
		data() {
			return {
				newIndex: "undefined"
			}
		},
		computed: {
			_index() {
				return this.newIndex === 'undefined' ? this.index : this.newIndex;
			},
			_row(){
				return 100 / (this.row || this.value.length);
			}
		},
		methods: {
			go(e, index) {
				e.disabled || (this.newIndex = index);
				this.$emit('click', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.a-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 14px;
		background-color: #fff;

		.item-box {
			box-sizing: border-box;
			height: 100%;
			text-align: center;
		}

		.item {
			// display: inline-block;
			position: relative;
			&.circle{
				border-radius: 999px;
				color: #fff;
			}
			&.border {
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 0;
					border-bottom: 2px solid;
					transform: translateY(50%);
				}
			}
		}
	}

	.border {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			display: block;
			height: 0;
			top: auto;
			right: 0;
			left: 0;
			bottom: 0;
			transform: scaleY(.5);
			border-bottom: 1px solid rgba(0, 0, 0, .2);
		}
	}
</style>
